<div id="content_header">
  <h3>Make Up Test</h3>
</div>

<div class="row">
  <div class="col-md-6">
    <!-- <a ui-sref="^.new" class="btn btn-primary">Set Up a Make Up Test For Student</a> -->
    <!-- <a ui-sref="classes.list" class="btn btn-primary">Set Up a Make Up Test For Student</a> -->
    <a ui-sref="^.schedules" class="btn btn-primary">Make Up Test Schedules</a>
    <!-- <a ui-sref="^.fee" class="btn btn-primary">MUT Fees</a> -->
  </div>
</div>

<br>

<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ (mt | filter:searchText).length }}</b></span> matched records
    </div>
  </div>
</div>

<!-- <div class="row" ng-repeat="(group, item) in groups">
  <h4>{{ group }} <small><ng-pluralize count="item.length" when="participantForms"></ng-pluralize></small></h4>
  <ul class="twoCollumns">
    <li ng-repeat="mtItem in item | filter: searchText">
      <div class="media">
        <a class="pull-left" href="#">
          <div class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 48px; height: 48px; background-color: #95A5A6;"></div>
        </a>
        <div class="media-body">
          <a ui-sref="^.show({id: $index})"><h4 class="media-heading">{{ students[mtItem.Id].FullName }}</h4></a>
          <p class="text-muted">
            <small>
              {{ courseTypes[mtItem.Id].CourseName }} - {{ mtItem.Date | date:'longDate' }} at {{ mtItem.Time }}
            </small>
          </p>
        </div>
      </div>
    </li>
  </ul>
  <hr>
</div> -->

<!-- <div class="row">
  <ul class="twoCollumns">
    <li ng-repeat="item in makeUpTests | filter: searchText">
      <div class="media">
        <a href="#" class="pull-left">
          <div class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 48px; height: 48px; background-color: #95A5A6;"></div>
        </a>
        <div class="media-body">
          <a ui-sref="students.show({id: item.Id})"><h4 class="media-heading">{{ item.Student.FullName }}</h4></a>
          <p class="text-muted">
            <small>
              {{ item.StudentCourseSchedule.CourseSchedule.Course.CourseName }} ({{ item.StudentCourseSchedule.CourseSchedule.Course.CourseType.Code }}) - {{ item.MakeUpTestSchedule.DateTime | date:'longDate' }} at {{ item.MakeUpTestSchedule.DateTime | date:'HH:mm' }}
            </small>
          </p>
        </div>
      </div>
    </li>
  </ul>
</div> -->

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tabset>
      <tab heading="Registered Students">
        <div class="row">
          <div class="col-md-6">
            <form class="form-vertical" ng-submit="pageChangedMT(0)">
              <div class="input-group">
                <input class="form-control" type="text" name="keyword" id="keyword" placeholder="Type Name and press enter to search" ng-model="params.student_name" title-case>
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">Go!</button>
                </span>
              </div>
            </form>
          </div>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Student</th>
              <th>Type</th>
              <th>Course</th>
              <th>Classroom</th>
              <th>Schedule</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="item in makeUpTests | itemsPerPage: pagesizeMT" total-items="totalMTItems" pagination-id="mut_pagination_id">
              <td>{{ item.Enrollment.Student.FullName }}</td>
              <td>{{ MakeUpTestTypes[item.Type].Label }}</td>
              <td>{{ item.Enrollment.CourseSchedule.Course.CourseLevel.Name }}/{{ item.Enrollment.CourseSchedule.Course.CourseLevel.Code }}/{{ item.Enrollment.CourseSchedule.Suffix }}</td>
              <td>{{ item.Classroom.Name }}</td>
              <td>{{ item.MakeUpTestSchedule.DateTime  | date:'medium' }}</td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageChangedMT(newPageNumber)" pagination-id="mut_pagination_id" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
      <tab heading="Available Students">
        <div class="row">
          <div class="col-md-6">
            <form class="form-vertical" ng-submit="pageChangedStudent(0)">
              <div class="input-group">
                <input class="form-control" type="text" name="keyword" id="keyword" placeholder="Type Name and press enter to search" ng-model="paramsStudent.student_name" title-case>
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">Go!</button>
                </span>
              </div>
            </form>
          </div>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Student</th>
              <th>Course</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="item in students | itemsPerPage: pagesizeStudent" total-items="totalItemsStudent" pagination-id="student_pagination_id">
              <td><a href ui-sref="^.new({id: item.Id})">{{ item.Student.FullName }}</a></td>
              <td>{{ item.CourseSchedule.Course.CourseLevel.Name }}/{{ item.CourseSchedule.Course.CourseLevel.Code }}/{{ item.CourseSchedule.Suffix }}</td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageChangedStudent(newPageNumber)" pagination-id="student_pagination_id" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
    </tabset>
  </div>
</div>